<template>
    <view class="custom_popup">
        <uni-popup ref="popupRef" :is-mask-click="false" animation type="center">
            <view class="popup_box">
                <view class="container">
                    <view v-if="titleText" class="title">
                        {{ titleText }}
                    </view>
                    <!-- 自定义内容 -->
                    <slot></slot>
                </view>
                <view class="footer">
                    <text v-if="cancelBtnText" class="btn cancel_btn" @click="tapCancelBtn">{{
                        cancelBtnText
                    }}</text>
                    <text class="btn confirm_btn" @click="tapConfirmBtn">{{ confirmBtnText }}</text>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    titleText: {
        type: String,
        default: '',
    },
    cancelBtnText: {
        type: String,
        default: '取消',
    },
    confirmBtnText: {
        type: String,
        default: '确定',
    },
});
const emits = defineEmits(['update:modelValue', 'handleConfirmBtn', 'handleCancelBtn']);

const popupRef = ref(null);
// 确认
function tapConfirmBtn() {
    emits('handleConfirmBtn');
}
// 取消
function tapCancelBtn() {
    popupRef.value.close();
    emits('update:modelValue', false);
    emits('handleCancelBtn');
}
watch(
    () => props.modelValue,
    () => {
        if (props.modelValue) {
            nextTick(() => {
                popupRef.value.open();
            });
        } else {
            nextTick(() => {
                popupRef.value && popupRef.value.close();
            });
        }
    },
    {
        immediate: true,
        deep: true,
    },
);
</script>

<style lang="scss" scoped>
.custom_popup {
    .popup_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 594rpx;
        background-color: #fff;
        border-radius: 20rpx;
        text-align: center;
        color: #333333;

        .container {
            min-height: 223rpx;

            .title {
                padding: 30rpx 0 0 0;
                line-height: 48rpx;
                font-weight: 500;
                font-style: 34rpx;
            }
        }

        .footer {
            display: flex;
            justify-content: center;
            width: 100%;
            height: 108rpx;
            line-height: 108rpx;
            border-top: 1px solid #eeeeee;
            color: #333333;
            font-size: 34rpx;
            font-weight: 500;

            .btn {
                display: block;
                flex: 1;
                text-align: center;
            }

            .cancel_btn {
                border-right: 1px solid #eeeeee;
            }

            .confirm_btn {
                color: #615dff;
            }
        }
    }
}
</style>
